
import React from 'react'

class unitSettingEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  onDataSubmit() {
    var data = this.state.data;
    if (this.props.isEdit) {
      this.props.onDataUpdate(data)
    }else {
      this.props.onDataCreate(data)
    }
  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }


  render() {
    var self = this;
    var sysUserName = self.state.data.sys_user?self.state.data.sys_user.firstName+" "+self.state.data.sys_user.lastName: ""
    return (
      <div className="modal fade" id="unitSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog " role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">户号</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="unit-name">户号</label>
                <input ref="unitName" type="text" className="form-control"
                        id="unit-name" placeholder="户号" value={self.state.data.unit_number}
                        onChange={(event)=>this.onChange(event, "unit_number")}/>
              </div>
              <div className="form-group">
                <label for="unit-desc">描述</label>
                <input ref="unitDesc" type="text" className="form-control"
                        id="unit-desc" placeholder="描述" value={self.state.data.unit_desc}
                        onChange={(event)=>this.onChange(event, "unit_desc")}/>
              </div>
              <div className="form-group">
                <label for="role-name">管理员&nbsp;</label>
                <button type="button" onClick={(event)=>this.props.onShowSysUserClick()}><span className="glyphicon glyphicon-plus"></span></button>
                <input ref="roleName" type="text" className="form-control"
                        id="role-name" placeholder="管理员"  value={sysUserName}
                        onChange={(event)=>this.onChange(event, "sys_user_name")}/>
                <input ref="sys_user_id" type="text" value={self.state.data.sys_user?self.state.data.sys_user.id:''}
                        hidden/>
              </div>
              <input ref="unitId" value={self.props.data.id} hidden/>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default unitSettingEdit
